<template>
  <div>
    <el-button @click="locale='zh'">zw</el-button>
    <el-button @click="locale='en'">en</el-button>
    <h1>{{ t('greeting') }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 当前语言记录
      locale: 'zh',
      // 字典
      messages: {
        // 每个属性都是一门语言的字典
        zh: {
          greeting: '欢迎您'
        },
        en: {
          greeting: 'Welcome'
        }
      }
    }
  },
  methods: {
    t(str) {
      const dict = this.messages[this.locale]
      const translation = dict[str]
      return translation
    }
  }
}
</script>

<style>

</style>
